<template>
  <div id='allEmployee' v-if="show">
    <div class="title">All Employee</div>
    <div class="content">
      <i-table @on-selection-change="tableSelectedChange" class="table-panel" :columns="tableColumns" :data="tableData"></i-table>
      <div class="btn-group">
        <button type="button" class="default-btn" @click="$emit('close')">Cancel</button>
        <button type="button" class="default-btn active" @click="done">Done</button>
      </div>
    </div>
  </div>
</template>

<script>
  import dAvatar from 'src/components/common/avatar-componet.vue'
	export default {
		name: 'allEmployee',
		components: {dAvatar},
    props:{
			show:{
				type:Boolean,
        required:true,
      },
      selection:{
				type:Array,
        default:function () {
          return [];
        }
      },
      list:{
        type:Array,
        default:function () {
          return [

          ];
        }
      }
    },
    created(){

    },
    computed:{

    },
    watch:{
      list(value){
      	var data = JSON.parse(JSON.stringify(value));
      	if(!data || !data.length){
          return;
        }
      	for(var i=0;i<data.length;i++){
          if(this.selection.length){
            if(this.selection.indexOf(data[i].employeeId)>-1){
            	data[i]._checked = true;
            }
          }else{
            if(data[i].isRelation){
              data[i]._checked = true;
            }
          }
        }
        this.tableData = data;
      },
    },
		data () {
			return {
        tableColumns:[
          {
          	type: 'selection',
            width: 60,
            align: 'center',
          },
          {
          	key:'employeeName',
            title :'Employee',
            className:'employee-column',
            ellipsis:true,
            render:function (row,column,index) {
              var firstName = row.firstName || '';
              var middleName = row.middleName || '';
              var lastName = row.lastName || '';
              var name = firstName + middleName +lastName;
              return `<d-avatar name="${name}" img-url="${row.headImg}"></d-avatar><span style="margin-left: 12px">${name}</span>`;
            }
          },
          {
            key:'orgName',
            title :'Department'
          }
        ],
        tableData:[],
        selectionId:[],
			}
		},
    methods:{
      init(){

      },
      tableSelectedChange(selection){
      	this.selectionId = selection.map(function (item) {
          return item.employeeId;
        })
      },
      done(){
        this.$emit('done',this.selectionId);
        this.$emit('close');
      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
    @import "src/assets/css/variable.scss";

    #allEmployee {
      position: fixed;
      left: 50%;
      top:50%;
      width: 550px;
      height: 540px;
      margin-left: -275px;
      margin-top: -270px;
      padding: 30px 48px;
      background: #FFFFFF;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.20);
      border-radius: 4px;
      z-index:101;
      >.title{
        line-height: 60px;
        font-size: 20px;
        color: #325570;
      }
      >.content{
       .table-panel{
         height: 340px;
         color: #325570;
         margin-bottom: 20px;
         .ivu-table-header{
           height: 40px;
           line-height: 40px;
         }
          td{
            height: 40px;
            line-height: 40px;
          }
         .employee-column{
           .avatar-img{
             width: 38px;
             height: 38px;
             border-radius: 50%;
             margin-right: 4px;
             vertical-align: middle;
           }
           .avatar-name{
             display: inline-block;
             width: 38px;
             height: 38px;
             line-height: 38px;
             text-align: center;
             border-radius: 50%;
             /*font-family: PingFangTC-Regular;*/
             font-size: 22px;
             color: #fff;
             background-color: #A3D572;
             margin-right: 4px;
             vertical-align: middle;
           }
         }
       }
        .btn-group{
          margin: 30px auto;
          text-align: center;
          button{
            margin:  0 20px;
          }
        }
      }
    }
</style>
